<template>
  <div class="consultation-page">
    <div class="main-content">
      <!-- 服务介绍区域 -->
      <div class="service-section">
        <!-- 左侧专业医疗服务 -->
        <div class="service-left">
          <div class="service-banner">
            <div class="service-emoji">👨‍⚕️</div>
            <div class="service-title">专业医疗服务</div>
            <div class="service-desc">提供专业的医疗服务，让您在家也能享受优质医疗</div>
          </div>
        </div>

        <!-- 右侧服务特色 -->
        <div class="service-right">
          <div class="feature-list">
            <div class="feature-item">
              <span class="feature-icon">👨‍⚕️</span>
              <div class="feature-content">
                <h4>专业医疗团队</h4>
                <p>资深医生坐诊，专业贴心服务</p>
              </div>
            </div>
            <div class="feature-item">
              <span class="feature-icon">📋</span>
              <div class="feature-content">
                <h4>个性化服务</h4>
                <p>制定专属医疗护理方案</p>
              </div>
            </div>
            <div class="feature-item">
              <span class="feature-icon">⏰</span>
              <div class="feature-content">
                <h4>急速响应</h4>
                <p>24小时在线急速响应</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 服务套餐区域 -->
      <div class="package-section">
        <h3>服务套餐</h3>
        <div class="service-type-selector">
          <div class="service-type-options">
            <div class="service-type-option" :class="{ active: serviceMode === 'medical' }"
              @click="switchServiceMode('medical')">
              <div class="option-icon">👨‍⚕️</div>
              <div class="option-content">
                <h4>上门问诊</h4>
                <p>专业医生上门服务</p>
              </div>
            </div>
            <div class="service-type-option" :class="{ active: serviceMode === 'accompany' }"
              @click="switchServiceMode('accompany')">
              <div class="option-icon">🏥</div>
              <div class="option-content">
                <h4>陪同问诊</h4>
                <p>全程陪诊服务</p>
              </div>
            </div>
          </div>
        </div>

        <!-- 上门问诊套餐 -->
        <div v-if="serviceMode === 'medical'" class="package-list">
          <div class="package-item basic" :class="{ active: form.serviceType === 'basic' }">
            <h4>基础问诊套餐</h4>
            <div class="price">¥299<span>/次</span></div>
            <ul>
              <li>普通医生上门问诊</li>
              <li>基础体检服务</li>
              <li>用药指导</li>
              <li>一周随访服务</li>
            </ul>
            <el-button type="primary" @click="selectPackage('basic')">选择套餐</el-button>
          </div>
          <div class="package-item premium recommended" :class="{ active: form.serviceType === 'premium' }">
            <div class="recommend-tag">推荐</div>
            <h4>标准问诊套餐</h4>
            <div class="price">¥499<span>/次</span></div>
            <ul>
              <li>专科医生上门问诊</li>
              <li>专业体检服务</li>
              <li>用药指导与调整</li>
              <li>两周随访服务</li>
              <li>24小时电话咨询</li>
            </ul>
            <el-button type="primary" @click="selectPackage('premium')">选择套餐</el-button>
          </div>
          <div class="package-item vip" :class="{ active: form.serviceType === 'vip' }">
            <h4>VIP问诊套餐</h4>
            <div class="price">¥799<span>/次</span></div>
            <ul>
              <li>主任医生上门问诊</li>
              <li>高级体检服务</li>
              <li>专属用药方案</li>
              <li>一个月随访服务</li>
              <li>24小时私人医生</li>
              <li>全程VIP陪护</li>
            </ul>
            <el-button type="primary" @click="selectPackage('vip')">选择套餐</el-button>
          </div>
        </div>

        <!-- 陪同就医套餐 -->
        <div v-else class="package-list">
          <div class="package-item basic" :class="{ active: form.accompanyType === '普通陪诊' }">
            <h4>普通陪诊套餐</h4>
            <div class="price">¥299<span>/次</span></div>
            <ul>
              <li>普通陪诊人员全程陪同</li>
              <li>代办挂号</li>
              <li>排队取药</li>
              <li>基础检查陪同</li>
            </ul>
            <el-button type="primary" @click="selectAccompanyType('普通陪诊')">选择套餐</el-button>
          </div>
          <div class="package-item premium recommended" :class="{ active: form.accompanyType === '专科陪诊' }">
            <div class="recommend-tag">推荐</div>
            <h4>专业陪诊套餐</h4>
            <div class="price">¥499<span>/次</span></div>
            <ul>
              <li>专业陪诊人员全程陪同</li>
              <li>代办挂号</li>
              <li>排队取药</li>
              <li>专科检查陪同</li>
              <li>检查结果解读</li>
              <li>就医建议咨询</li>
            </ul>
            <el-button type="primary" @click="selectAccompanyType('专科陪诊')">选择套餐</el-button>
          </div>
          <div class="package-item vip" :class="{ active: form.accompanyType === '加急陪诊' }">
            <h4>加急陪诊套餐</h4>
            <div class="price">¥799<span>/次</span></div>
            <ul>
              <li>资深陪诊人员全程陪同</li>
              <li>加急挂号</li>
              <li>优先就医</li>
              <li>全程VIP陪护</li>
              <li>专家号代挂</li>
              <li>24小时电话咨询</li>
              <li>一周跟踪随访</li>
            </ul>
            <el-button type="primary" @click="selectAccompanyType('加急陪诊')">选择套餐</el-button>
          </div>
        </div>
      </div>

      <!-- 立即问诊表单 -->
      <div class="consultation-form">
        <h3>{{ serviceMode === 'medical' ? '预约问诊' : '预约陪诊' }}</h3>
        <el-form :model="form" label-width="100px" :rules="rules" ref="formRef">
          <el-form-item label="患者姓名" prop="patientName">
            <el-input v-model="form.patientName" placeholder="请输入患者姓名" />
          </el-form-item>
          <el-form-item label="联系电话" prop="phone">
            <el-input v-model="form.phone" placeholder="请输入联系电话" />
          </el-form-item>
          <el-form-item label="就诊时间" prop="time">
            <el-date-picker v-model="form.time" type="datetime" placeholder="选择预约时间" format="YYYY-MM-DD HH:mm"
              value-format="YYYY-MM-DD HH:mm" :disabled-date="disabledDate" style="width: 100%" />
          </el-form-item>

          <!-- 陪同就医特有字段 -->
          <template v-if="serviceMode === 'accompany'">
            <el-form-item label="就诊医院" prop="hospitalName">
              <el-input v-model="form.hospitalName" placeholder="请输入就诊医院名称" />
            </el-form-item>
            <el-form-item label="就诊科室" prop="department">
              <el-input v-model="form.department" placeholder="请输入就诊科室" />
            </el-form-item>
          </template>

          <!-- 上门地址（仅上门问诊需要） -->
          <el-form-item v-if="serviceMode === 'medical'" label="上门地址" prop="address">
            <el-input type="textarea" v-model="form.address" placeholder="请输入详细地址" :rows="2" />
          </el-form-item>

          <!-- 服务选项 -->
          <el-form-item label="服务选项" prop="serviceType">
            <div class="service-packages">
              <!-- 根据模式显示不同的服务选项 -->
              <div v-if="serviceMode === 'medical'">
                <!-- 医疗服务选项 -->
                <div class="service-category">
                  <h5>上门医生</h5>
                  <div class="service-items">
                    <el-checkbox v-model="form.services.basicDoctor" @change="handleServiceSelect">
                      <div class="service-item">
                        <span>普通医生上门</span>
                        <span class="price">¥199</span>
                      </div>
                    </el-checkbox>
                    <el-checkbox v-model="form.services.premiumDoctor" @change="handleServiceSelect">
                      <div class="service-item">
                        <span>专科医生上门</span>
                        <span class="price">¥299</span>
                      </div>
                    </el-checkbox>
                    <el-checkbox v-model="form.services.vipDoctor" @change="handleServiceSelect">
                      <div class="service-item">
                        <span>主任医生上门</span>
                        <span class="price">¥399</span>
                      </div>
                    </el-checkbox>
                  </div>
                </div>

                <div class="service-row">
                  <h5>基础检查</h5>
                  <div class="service-items">
                    <el-checkbox v-model="form.services.basicCheck" @change="handleServiceSelect">
                      <div class="service-item">
                        <span>基础体检</span>
                        <span class="price">¥99</span>
                      </div>
                    </el-checkbox>
                    <el-checkbox v-model="form.services.bloodPressure" @change="handleServiceSelect">
                      <div class="service-item">
                        <span>血压测量</span>
                        <span class="price">¥39</span>
                      </div>
                    </el-checkbox>
                    <el-checkbox v-model="form.services.bloodSugar" @change="handleServiceSelect">
                      <div class="service-item">
                        <span>血糖检测</span>
                        <span class="price">¥49</span>
                      </div>
                    </el-checkbox>
                    <el-checkbox v-model="form.services.ecg" @change="handleServiceSelect">
                      <div class="service-item">
                        <span>心电图检查</span>
                        <span class="price">¥159</span>
                      </div>
                    </el-checkbox>
                  </div>
                </div>

                <div class="service-row">
                  <h5>专科检查</h5>
                  <div class="service-items">
                    <el-checkbox v-model="form.services.heartCheck" @change="handleServiceSelect">
                      <div class="service-item">
                        <span>心脏专科检查</span>
                        <span class="price">¥299</span>
                      </div>
                    </el-checkbox>
                    <el-checkbox v-model="form.services.lungFunction" @change="handleServiceSelect">
                      <div class="service-item">
                        <span>肺功能检测</span>
                        <span class="price">¥259</span>
                      </div>
                    </el-checkbox>
                    <el-checkbox v-model="form.services.liverFunction" @change="handleServiceSelect">
                      <div class="service-item">
                        <span>肝功能检查</span>
                        <span class="price">¥199</span>
                      </div>
                    </el-checkbox>
                    <el-checkbox v-model="form.services.kidneyFunction" @change="handleServiceSelect">
                      <div class="service-item">
                        <span>肾功能检查</span>
                        <span class="price">¥199</span>
                      </div>
                    </el-checkbox>
                  </div>
                </div>

                <div class="service-row">
                  <h5>护理服务</h5>
                  <div class="service-items">
                    <el-checkbox v-model="form.services.injection" @change="handleServiceSelect">
                      <div class="service-item">
                        <span>注射服务</span>
                        <span class="price">¥49</span>
                      </div>
                    </el-checkbox>
                    <el-checkbox v-model="form.services.dressing" @change="handleServiceSelect">
                      <div class="service-item">
                        <span>伤口换药</span>
                        <span class="price">¥79</span>
                      </div>
                    </el-checkbox>
                    <el-checkbox v-model="form.services.catheter" @change="handleServiceSelect">
                      <div class="service-item">
                        <span>导管护理</span>
                        <span class="price">¥99</span>
                      </div>
                    </el-checkbox>
                    <el-checkbox v-model="form.services.rehabilitation" @change="handleServiceSelect">
                      <div class="service-item">
                        <span>康复指导</span>
                        <span class="price">¥89</span>
                      </div>
                    </el-checkbox>
                  </div>
                </div>

                <div class="service-row">
                  <h5>观察与咨询</h5>
                  <div class="service-items">
                    <el-checkbox v-model="form.services.observation" @change="handleServiceSelect">
                      <div class="service-item">
                        <span>病情观察</span>
                        <span class="price">¥159</span>
                      </div>
                    </el-checkbox>
                    <el-checkbox v-model="form.services.medication" @change="handleServiceSelect">
                      <div class="service-item">
                        <span>用药咨询</span>
                        <span class="price">¥99</span>
                      </div>
                    </el-checkbox>
                    <el-checkbox v-model="form.services.nutrition" @change="handleServiceSelect">
                      <div class="service-item">
                        <span>营养咨询</span>
                        <span class="price">¥129</span>
                      </div>
                    </el-checkbox>
                    <el-checkbox v-model="form.services.rehabPlan" @change="handleServiceSelect">
                      <div class="service-item">
                        <span>康复方案制定</span>
                        <span class="price">¥199</span>
                      </div>
                    </el-checkbox>
                    <el-checkbox v-model="form.services.psychology" @change="handleServiceSelect">
                      <div class="service-item">
                        <span>心理康复咨询</span>
                        <span class="price">¥259</span>
                      </div>
                    </el-checkbox>
                    <el-checkbox v-model="form.services.familyGuidance" @change="handleServiceSelect">
                      <div class="service-item">
                        <span>家庭康复指导</span>
                        <span class="price">¥499</span>
                      </div>
                    </el-checkbox>
                  </div>
                </div>
              </div>
              <div v-else>
                <!-- 陪诊服务选项 -->
                <!-- 陪诊人员 -->
                <div class="service-category">
                  <h5>陪诊人员</h5>
                  <div class="service-items">
                    <el-checkbox v-model="form.services.normalStaff" @change="handleServiceSelect">
                      <div class="service-item">
                        <span>普通陪诊人员</span>
                        <span class="price">¥0</span>
                      </div>
                    </el-checkbox>
                    <el-checkbox v-model="form.services.specialStaff" @change="handleServiceSelect">
                      <div class="service-item">
                        <span>专业陪诊人员</span>
                        <span class="price">¥100</span>
                      </div>
                    </el-checkbox>
                    <el-checkbox v-model="form.services.nurseStaff" @change="handleServiceSelect">
                      <div class="service-item">
                        <span>资深医护人员</span>
                        <span class="price">¥200</span>
                      </div>
                    </el-checkbox>
                  </div>
                </div>

                <!-- 陪诊服务 -->
                <div class="service-category">
                  <h5>陪诊服务</h5>
                  <div class="service-items">
                    <el-checkbox v-model="form.services.accompanyService" @change="handleServiceSelect">
                      <div class="service-item">
                        <span>挂号陪诊</span>
                        <span class="price">¥99</span>
                      </div>
                    </el-checkbox>
                    <el-checkbox v-model="form.services.medicineGuide" @change="handleServiceSelect">
                      <div class="service-item">
                        <span>排队导医</span>
                        <span class="price">¥59</span>
                      </div>
                    </el-checkbox>
                    <el-checkbox v-model="form.services.doctorAdvice" @change="handleServiceSelect">
                      <div class="service-item">
                        <span>就医咨询</span>
                        <span class="price">¥79</span>
                      </div>
                    </el-checkbox>
                    <el-checkbox v-model="form.services.medicalGuide" @change="handleServiceSelect">
                      <div class="service-item">
                        <span>就医指导</span>
                        <span class="price">¥89</span>
                      </div>
                    </el-checkbox>
                  </div>
                </div>

                <!-- 代办服务 -->
                <div class="service-category">
                  <h5>代办服务</h5>
                  <div class="service-items">
                    <el-checkbox v-model="form.services.registration" @change="handleServiceSelect">
                      <div class="service-item">
                        <span>代办挂号</span>
                        <span class="price">¥199</span>
                      </div>
                    </el-checkbox>
                    <el-checkbox v-model="form.services.medicine" @change="handleServiceSelect">
                      <div class="service-item">
                        <span>代取药品</span>
                        <span class="price">¥159</span>
                      </div>
                    </el-checkbox>
                    <el-checkbox v-model="form.services.urgentRegistration" @change="handleServiceSelect">
                      <div class="service-item">
                        <span>加急挂号</span>
                        <span class="price">¥299</span>
                      </div>
                    </el-checkbox>
                    <el-checkbox v-model="form.services.expertRegistration" @change="handleServiceSelect">
                      <div class="service-item">
                        <span>专家号代挂</span>
                        <span class="price">¥399</span>
                      </div>
                    </el-checkbox>
                  </div>
                </div>

                <!-- 特色服务 -->
                <div class="service-category">
                  <h5>特色服务</h5>
                  <div class="service-items">
                    <el-checkbox v-model="form.services.resultExplanation" @change="handleServiceSelect">
                      <div class="service-item">
                        <span>检查结果解读</span>
                        <span class="price">¥159</span>
                      </div>
                    </el-checkbox>
                    <el-checkbox v-model="form.services.medicalAdvice" @change="handleServiceSelect">
                      <div class="service-item">
                        <span>就医建议</span>
                        <span class="price">¥99</span>
                      </div>
                    </el-checkbox>
                    <el-checkbox v-model="form.services.followUp" @change="handleServiceSelect">
                      <div class="service-item">
                        <span>一周跟踪随访</span>
                        <span class="price">¥199</span>
                      </div>
                    </el-checkbox>
                  </div>
                </div>
              </div>
            </div>
          </el-form-item>

          <el-form-item>
            <div class="form-footer">
              <div class="total-price">
                总计金额：<span>¥{{ getTotalPrice }}</span>
              </div>
              <el-button type="primary" @click="submitConsultation" :loading="loading">
                {{ serviceMode === 'medical' ? '预约问诊' : '预约陪诊' }}
              </el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <!-- 预约模态框 -->
    <el-dialog v-model="dialogVisible" :title="serviceMode === 'medical' ? '预约问诊' : '预约陪诊'" width="500px">
      <el-form :model="form" label-width="100px" :rules="rules" ref="formRef">
        <el-form-item label="患者姓名" prop="patientName">
          <el-input v-model="form.patientName" placeholder="请输入患者姓名" />
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入联系电话" />
        </el-form-item>
        <el-form-item label="就诊时间" prop="time">
          <el-date-picker v-model="form.time" type="datetime" placeholder="选择预约时间" format="YYYY-MM-DD HH:mm"
            value-format="YYYY-MM-DD HH:mm" :disabled-date="disabledDate" style="width: 100%" />
        </el-form-item>

        <!-- 陪同就医特有字段 -->
        <template v-if="serviceMode === 'accompany'">
          <el-form-item label="就诊医院" prop="hospitalName">
            <el-input v-model="form.hospitalName" placeholder="请输入就诊医院名称" />
          </el-form-item>
          <el-form-item label="就诊科室" prop="department">
            <el-input v-model="form.department" placeholder="请输入就诊科室" />
          </el-form-item>
        </template>

        <!-- 上门地址（仅上门问诊需要） -->
        <el-form-item v-if="serviceMode === 'medical'" label="上门地址" prop="address">
          <el-input type="textarea" v-model="form.address" placeholder="请输入详细地址" :rows="2" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <div class="total-price">
            总计金额：<span>¥{{ getTotalPrice }}</span>
          </div>
          <div>
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="submitConsultation" :loading="loading">
              确认预约
            </el-button>
          </div>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.consultation-page {
  min-height: 100vh;
  background-color: #f5f7fa;
}

.main-content {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.service-section {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
}

.service-left {
  flex: 1;
}

.service-right {
  flex: 1;
}

.service-banner {
  background-color: #e8f4ff;
  border-radius: 8px;
  padding: 40px;
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.service-emoji {
  font-size: 48px;
  margin-bottom: 15px;
}

.service-title {
  font-size: 24px;
  color: #333;
  font-weight: 500;
  margin-bottom: 10px;
}

.service-desc {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
}

.feature-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  height: 100%;
}

.feature-item {
  background: white;
  padding: 15px;
  border-radius: 8px;
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.feature-icon {
  font-size: 24px;
}

.feature-content h4 {
  font-size: 14px;
  color: #333;
  margin-bottom: 4px;
}

.feature-content p {
  font-size: 12px;
  color: #666;
  line-height: 1.5;
}

/* 服务套餐样式 */
.package-section {
  margin-bottom: 30px;
}

.package-section h3 {
  font-size: 20px;
  color: #333;
  margin-bottom: 20px;
}

.package-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.package-item {
  background: white;
  border-radius: 8px;
  padding: 30px;
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
  border: 1px solid #ebeef5;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.package-item.active {
  border-color: var(--el-color-primary);
  background: var(--el-color-primary-light-9);
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.package-item.recommended {
  border-color: var(--el-color-primary);
  border-width: 2px;
}

.package-item .recommend-tag {
  position: absolute;
  top: -12px;
  right: -12px;
  background-color: var(--el-color-primary);
  color: white;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.package-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.package-item h4 {
  font-size: 18px;
  color: #333;
  margin-bottom: 15px;
}

.package-item .price {
  font-size: 32px;
  color: #f56c6c;
  font-weight: bold;
  margin-bottom: 20px;
}

.package-item .price span {
  font-size: 14px;
  color: #999;
  font-weight: normal;
}

.package-item ul {
  list-style: none;
  padding: 0;
  margin: 0 0 auto;
  text-align: left;
  flex: 1;
}

.package-item ul li {
  padding: 8px 0;
  color: #666;
  font-size: 14px;
  position: relative;
  padding-left: 20px;
}

.package-item ul li:before {
  content: '✓';
  color: #67c23a;
  position: absolute;
  left: 0;
}

.package-item .el-button {
  margin-top: 20px;
  width: 100%;
}

.consultation-form {
  background: white;
  border-radius: 8px;
  padding: 30px;
  margin-top: 20px;
}

.consultation-form h3 {
  font-size: 16px;
  color: #333;
  margin-bottom: 30px;
}

.form-footer {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center;
  margin-top: 30px;
  padding: 0;
  width: 100%;
}

.total-price {
  margin-right: 20px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 16px;
  color: #606266;
  justify-content: flex-end;
}

.total-price span {
  font-size: 28px;
  font-weight: 600;
  color: #f56c6c;
  font-family: DIN Alternate, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
}

.form-footer .el-button {
  min-width: 120px;
}

@media (max-width: 768px) {
  .form-footer {
    flex-direction: row !important;
    gap: 20px;
    justify-content: flex-end !important;
  }

  .total-price {
    margin-right: 15px;
    white-space: nowrap;
  }
}

:deep(.el-button--primary) {
  height: 44px;
  padding: 0 32px;
  font-size: 16px;
  font-weight: 500;
  border-radius: 22px;
  transition: all 0.3s ease;
}

:deep(.el-button--primary:hover) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

:deep(.el-button--primary:active) {
  transform: translateY(0);
}

.dialog-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: #f8f9fa;
  margin: 0 -20px -20px;
  border-top: 1px solid #e4e7ed;
}

.dialog-footer .total-price {
  padding-left: 20px;
}

.dialog-footer .el-button {
  margin-left: 12px;
}

@keyframes price-update {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

@media (max-width: 768px) {
  .form-footer {
    flex-direction: row;
    gap: 20px;
    text-align: right;
  }

  .total-price {
    margin-right: 15px;
  }

  :deep(.el-button--primary) {
    width: auto;
  }
}

:deep(.el-radio-group) {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

:deep(.el-radio) {
  height: auto;
  margin-right: 0;
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 8px;
}

:deep(.el-radio.is-checked) {
  background-color: var(--el-color-primary-light-9);
  border-color: var(--el-color-primary);
}

/* 服务套餐详情样式 */
.service-details {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid #eee;
}

.service-details h4 {
  font-size: 16px;
  color: #333;
  margin-bottom: 20px;
}

.service-category {
  margin-bottom: 20px;
}

.service-category h5 {
  font-size: 14px;
  color: #333;
  margin-bottom: 15px;
}

.service-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}

.service-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background: none;
  border-radius: 4px;
  font-size: 14px;
  color: #737373;
  border: 1px solid #b4b4b4;
  transition: all 0.3s ease;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
}

.service-item:hover {
  background-color: #f5f7fa;
  border-color: #409eff;
  color: #409eff;
}

.service-item .price {
  color: #f56c6c;
  font-weight: 500;
}

@media (max-width: 768px) {
  .service-section {
    flex-direction: column;
  }

  .package-list {
    grid-template-columns: 1fr;
  }

  .service-items {
    grid-template-columns: 1fr;
  }
}

/* 页脚样式 */
.site-footer {
  background-color: #2c3e50;
  color: #fff;
  padding: 40px 0 20px;
  margin-top: 60px;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  padding: 0 20px;
}

.footer-section h4 {
  font-size: 16px;
  margin-bottom: 20px;
  color: #fff;
}

.footer-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-section ul li {
  margin-bottom: 10px;
  font-size: 14px;
  color: #a8b6c5;
  cursor: pointer;
  transition: color 0.3s;
}

.footer-section ul li:hover {
  color: #fff;
}

.footer-bottom {
  max-width: 1200px;
  margin: 40px auto 0;
  padding: 20px 20px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}

.footer-bottom p {
  font-size: 12px;
  color: #a8b6c5;
  margin: 5px 0;
}

@media (max-width: 768px) {
  .footer-content {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .footer-content {
    grid-template-columns: 1fr;
  }
}

/* 服务套餐选择样式 */
.service-packages {
  border: 1px solid #ebeef5;
  border-radius: 8px;
  padding: 20px;
  width: 100%;
}

.service-category {
  margin-bottom: 24px;
  width: 100%;
}

.service-row {
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;
  padding-bottom: 20px;
  width: 100%;
}

.service-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  width: 100%;
}

.service-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  background: #fff;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  transition: all 0.3s ease;
  width: 100%;
}

:deep(.el-checkbox) {
  width: 100%;
  margin-right: 0;
}

:deep(.el-checkbox__label) {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.service-item span {
  font-size: 14px;
  color: #606266;
}

.service-item .price {
  color: #f56c6c;
  font-weight: 500;
  margin-left: 8px;
}

@media (max-width: 1200px) {
  .service-items {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

@media (max-width: 768px) {
  .service-items {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
}

@media (max-width: 480px) {
  .service-items {
    grid-template-columns: 1fr;
  }
}

/* 服务类型选择器样式 */
.service-type-selector {
  margin-bottom: 30px;
}

.service-type-options {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
}

.service-type-option {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px;
  background: white;
  border: 2px solid #e4e7ed;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.service-type-option:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.service-type-option.active {
  border-color: var(--el-color-primary);
  background: var(--el-color-primary-light-9);
}

.option-icon {
  font-size: 32px;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--el-color-primary-light-9);
  border-radius: 50%;
}

.active .option-icon {
  background: var(--el-color-primary-light-8);
}

.option-content {
  flex: 1;
}

.option-content h4 {
  font-size: 18px;
  color: #333;
  margin-bottom: 4px;
}

.option-content p {
  font-size: 14px;
  color: #666;
  margin: 0;
}

@media (max-width: 768px) {
  .service-type-options {
    flex-direction: column;
  }
}

/* 服务选项样式优化 */
.service-category {
  margin-bottom: 30px;
}

.service-category h5 {
  font-size: 16px;
  color: #333;
  margin-bottom: 20px;
  font-weight: 500;
  position: relative;
  padding-left: 12px;
}

.service-category h5::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 16px;
  background: var(--el-color-primary);
  border-radius: 2px;
}

.service-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

.service-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: #fff;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  transition: all 0.3s ease;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
}

.service-item:hover {
  background-color: #f5f7fa;
  border-color: #409eff;
  color: #409eff;
}

:deep(.el-checkbox) {
  width: 100%;
  margin-right: 0;
}

:deep(.el-checkbox__label) {
  width: 100%;
}

.service-item span {
  font-size: 15px;
  color: #333;
}

.service-item .price {
  color: #f56c6c;
  font-weight: 500;
  font-size: 16px;
}

@media (max-width: 768px) {
  .service-items {
    grid-template-columns: 1fr;
  }
}

.dialog-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
}

.total-price {
  font-size: 14px;
  color: #666;
}

.total-price span {
  color: #f56c6c;
  font-size: 20px;
  font-weight: bold;
  margin-left: 8px;
}
</style>

<script setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { createConsultation } from '@/api/consultations'
import { useUserStore } from '@/stores/user'
import { useRouter } from 'vue-router'

const userStore = useUserStore()
const router = useRouter()
const formRef = ref(null)
const loading = ref(false)

const serviceMode = ref('medical') // 'medical' 或 'accompany'

const form = reactive({
  patientName: '',
  phone: '',
  time: '',
  address: '',
  serviceType: '',
  accompanyType: '', // 陪诊类型
  hospitalName: '', // 医院名称
  department: '', // 就诊科室
  orderType: 'package', // 订单类型 'package' | 'custom'
  services: {
    // 上门问诊服务
    basicDoctor: false,
    premiumDoctor: false,
    vipDoctor: false,
    // 基础检查
    basicCheck: false,
    bloodPressure: false,
    bloodSugar: false,
    ecg: false,
    // 专科检查
    heartCheck: false,
    lungFunction: false,
    liverFunction: false,
    kidneyFunction: false,
    // 护理服务
    injection: false,
    dressing: false,
    catheter: false,
    rehabilitation: false,
    // 观察与咨询
    observation: false,
    medication: false,
    nutrition: false,
    rehabPlan: false,
    psychology: false,
    familyGuidance: false,
    // 陪诊服务
    registration: false, // 代办挂号
    medicine: false, // 代取药品
    urgentRegistration: false, // 加急挂号
    expertRegistration: false, // 专家号代挂
    resultExplanation: false, // 检查结果解读
    medicalAdvice: false, // 就医建议
    followUp: false, // 一周跟踪随访
    // 新增陪诊人员和陪诊服务
    normalStaff: false, // 普通陪诊人员
    specialStaff: false, // 专业陪诊人员
    nurseStaff: false, // 资深医护人员
    accompanyService: false, // 挂号陪诊
    medicineGuide: false, // 排队导医
    doctorAdvice: false, // 就医咨询
    medicalGuide: false, // 就医指导
  },
})

const rules = {
  patientName: [
    { required: true, message: '请输入患者姓名', trigger: 'blur' },
    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' },
  ],
  phone: [
    { required: true, message: '请输入联系电话', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' },
  ],
  time: [{ required: true, message: '请选择预约时间', trigger: 'change' }],
  address: [
    { required: true, message: '请输入上门地址', trigger: 'blur' },
    { min: 5, max: 100, message: '地址长度在 5 到 100 个字符', trigger: 'blur' },
  ],
  serviceType: [{ required: true, message: '请选择服务套餐', trigger: 'change' }],
  hospitalName: [
    { required: true, message: '请输入就诊医院', trigger: 'blur' },
    { min: 2, max: 100, message: '医院名称长度在 2 到 100 个字符', trigger: 'blur' },
  ],
  department: [{ required: true, message: '请输入就诊科室', trigger: 'blur' }],
}

const packagePrices = {
  basic: 199,
  premium: 399,
  vip: 599,
}

const servicesPrices = {
  // 上门医生
  basicDoctor: 199,
  premiumDoctor: 299,
  vipDoctor: 399,
  // 基础检查
  basicCheck: 99,
  bloodPressure: 39,
  bloodSugar: 49,
  ecg: 159,
  // 专科检查
  heartCheck: 299,
  lungFunction: 259,
  liverFunction: 199,
  kidneyFunction: 199,
  // 护理服务
  injection: 49,
  dressing: 79,
  catheter: 99,
  rehabilitation: 89,
  // 观察与咨询
  observation: 159,
  medication: 99,
  nutrition: 129,
  rehabPlan: 199,
  psychology: 259,
  familyGuidance: 499,
  // 陪诊服务
  registration: 199,
  medicine: 159,
  urgentRegistration: 299,
  expertRegistration: 399,
  resultExplanation: 159,
  medicalAdvice: 99,
  followUp: 199,
  // 新增陪诊人员和陪诊服务
  normalStaff: 0,
  specialStaff: 100,
  nurseStaff: 200,
  accompanyService: 99,
  medicineGuide: 59,
  doctorAdvice: 79,
  medicalGuide: 89,
}

const disabledDate = (time) => {
  return time.getTime() < Date.now() - 8.64e7 // 禁用今天之前的日期
}

const dialogVisible = ref(false)

const selectPackage = (type) => {
  form.serviceType = type
  form.orderType = 'package'
  // 重置所有服务选择
  Object.keys(form.services).forEach((key) => {
    form.services[key] = false
  })
  // 打开模态框
  dialogVisible.value = true
}

const submitConsultation = async () => {
  if (!formRef.value) return
  if (!userStore.isLoggedIn || !userStore.user) {
    ElMessage.warning('请先登录后再预约')
    router.push('/login')
    return
  }

  try {
    loading.value = true
    await formRef.value.validate()

    const [date, time] = form.time.split(' ')
    const consultationData = {
      patient_name: form.patientName,
      phone: form.phone,
      date,
      time,
      address: serviceMode.value === 'medical' ? form.address : '',
      service_type:
        serviceMode.value === 'medical' ? form.serviceType : form.accompanyType || '普通陪诊',
      total_price: getTotalPrice.value,
      order_type: Object.values(form.services).some((v) => v) ? 'custom' : 'package',
      accompany_type: serviceMode.value === 'accompany' ? form.accompanyType || '普通陪诊' : null,
      hospital_name: serviceMode.value === 'accompany' ? form.hospitalName : null,
      department: serviceMode.value === 'accompany' ? form.department : null,
      selected_services: Object.entries(form.services)
        .filter(([_, isSelected]) => isSelected)
        .map(([service]) => service),
    }

    // 确保陪诊服务必填字段
    if (serviceMode.value === 'accompany') {
      if (!consultationData.hospital_name) {
        ElMessage.warning('请输入就诊医院')
        return
      }
      if (!consultationData.department) {
        ElMessage.warning('请输入就诊科室')
        return
      }
      // 如果是自选服务，确保选择了陪诊人员
      if (
        consultationData.order_type === 'custom' &&
        !['normalStaff', 'specialStaff', 'nurseStaff'].some((staff) => form.services[staff])
      ) {
        ElMessage.warning('请选择陪诊人员')
        return
      }
    }

    console.log('提交预约数据:', consultationData)
    console.log('用户信息:', userStore.user)
    console.log('本地存储的 token:', localStorage.getItem('token'))

    const response = await createConsultation(consultationData)
    console.log('预约响应:', response)

    ElMessage.success('预约成功')
    // 关闭模态框
    dialogVisible.value = false
    // 重置表单
    formRef.value.resetFields()
    // 重置服务选择
    Object.keys(form.services).forEach((key) => {
      form.services[key] = false
    })
    // 跳转到个人中心
    router.push('/profile')
  } catch (error) {
    console.error('预约失败:', error)
    ElMessage.error(error.response?.data?.message || '预约失败，请重试')
  } finally {
    loading.value = false
  }
}

// 选择陪诊类型
const selectAccompanyType = (type) => {
  console.log('选择陪诊类型:', type)
  form.accompanyType = type
  form.serviceType = type // 使用陪诊类型作为服务类型
  form.orderType = 'package'
  // 重置所有服务选择
  Object.keys(form.services).forEach((key) => {
    form.services[key] = false
  })
  // 打开模态框
  dialogVisible.value = true
}

// 处理服务选择
const handleServiceSelect = () => {
  // 检查是否有任何服务被选中
  const hasSelectedServices = Object.values(form.services).some((value) => value)

  if (hasSelectedServices) {
    form.orderType = 'custom'
    form.serviceType = 'custom' // 设置一个默认的service_type
  } else {
    form.orderType = 'package'
    form.serviceType = ''
  }
  form.accompanyType = ''
}

// 计算总价格
const getTotalPrice = computed(() => {
  let total = 0

  if (serviceMode.value === 'medical') {
    if (form.orderType === 'package') {
      // 套餐价格
      const packagePrices = {
        basic: 299,
        premium: 499,
        vip: 799,
      }
      total = packagePrices[form.serviceType] || 0
    } else {
      // 自定义服务价格
      const medicalServicePrices = {
        basicDoctor: 199,
        premiumDoctor: 299,
        vipDoctor: 399,
        basicCheck: 99,
        bloodPressure: 39,
        bloodSugar: 49,
        ecg: 159,
        heartCheck: 299,
        lungFunction: 259,
        liverFunction: 199,
        kidneyFunction: 199,
        injection: 49,
        dressing: 79,
        catheter: 99,
        rehabilitation: 89,
        observation: 159,
        medication: 99,
        nutrition: 129,
        rehabPlan: 199,
        psychology: 259,
        familyGuidance: 499,
      }

      Object.entries(form.services).forEach(([service, isSelected]) => {
        if (isSelected && medicalServicePrices[service]) {
          total += medicalServicePrices[service]
        }
      })
    }
  } else {
    // 陪诊服务价格计算
    if (form.orderType === 'package') {
      // 套餐价格
      const accompanyPrices = {
        普通陪诊: 299,
        专科陪诊: 499,
        加急陪诊: 799,
      }
      total = accompanyPrices[form.accompanyType] || 0
    } else {
      // 自定义服务价格
      const accompanyServicePrices = {
        registration: 199,
        medicine: 159,
        urgentRegistration: 299,
        expertRegistration: 399,
        resultExplanation: 159,
        medicalAdvice: 99,
        followUp: 199,
        normalStaff: 0,
        specialStaff: 100,
        nurseStaff: 200,
        accompanyService: 99,
        medicineGuide: 59,
        doctorAdvice: 79,
        medicalGuide: 89,
      }

      Object.entries(form.services).forEach(([service, isSelected]) => {
        if (isSelected && accompanyServicePrices[service]) {
          total += accompanyServicePrices[service]
        }
      })
    }
  }

  return total
})

// 切换服务模式
const switchServiceMode = (mode) => {
  serviceMode.value = mode
  // 重置表单相关字段
  form.serviceType = ''
  form.accompanyType = ''
  form.orderType = 'package'
  // 重置所有服务选择
  Object.keys(form.services).forEach((key) => {
    form.services[key] = false
  })
}
</script>
